import { ref, reactive } from 'vue';
import { getRoleList } from '@/api/role/role';
import type { RoleListParams, RoleListItem } from '@/api/role/role.d';

export default function useTableData(searchForm: RoleListParams) {

    const columns = ref([
        {
            title: '序号',
            dataIndex: 'index',
            width: 70,
            slotName: 'index'
        },
        {
            title: '角色名称',
            width: 180,
            dataIndex: 'name',
            ellipsis: true,
            tooltip: true,
        },
        {
            title: '角色描述',
            width: 200,
            dataIndex: 'description',
            ellipsis: true,
            tooltip: true,
        },
        {
            title: '用户状态',
            width: 180,
            dataIndex: 'status',
            slotName: 'status'
        },
        {
            title: '操作',
            width: 180,
            dataIndex: 'action',
            slotName: 'action'
        }
    ]);

    const scroll = reactive({
        x: '100%',
        // y: 'calc(100% - 50px)',
        y: "100%"
        // maxHeight: 540
    })
    
    let data = ref<RoleListItem[]>([]);
    let total = ref<number>(0);
  
    const getTableData = async () => {
        let params = { ...searchForm };
        const res = await getRoleList(params);
        res && (data.value = res.data.list);
        res && (total.value = res.data.total);
    }

    return {
        columns,
        data,
        scroll,
        total,
        getTableData
    }
}